<template>
  <view class="new-chat-container">
    <!-- 顶部搜索框 -->
    <view class="search-box">
      <view class="search-input-box">
        <wd-icon name="search" size="16px" color="#999" class="search-icon" />
        <input
          v-model="searchKeyword"
          class="search-input"
          placeholder="搜索宗亲"
          @input="handleSearch"
        />
      </view>
    </view>

    <!-- 最近联系人 -->
    <view v-if="!searchKeyword && recentContacts.length > 0" class="section">
      <view class="section-title">最近聊天</view>
      <view class="contact-list">
        <view
          v-for="(contact, index) in recentContacts"
          :key="'recent-' + index"
          class="contact-item"
          @click="startChat(contact)"
        >
          <image
            class="contact-avatar"
            :src="contact.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'"
            mode="aspectFill"
          />
          <view class="contact-info">
            <view class="contact-name">{{ contact.name }}</view>
            <view class="contact-relation">{{ contact.relation }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view v-if="searchKeyword && searchResults.length > 0" class="section">
      <view class="section-title">搜索结果</view>
      <view class="contact-list">
        <view
          v-for="(contact, index) in searchResults"
          :key="'search-' + index"
          class="contact-item"
          @click="startChat(contact)"
        >
          <image
            class="contact-avatar"
            :src="contact.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'"
            mode="aspectFill"
          />
          <view class="contact-info">
            <view class="contact-name">{{ contact.name }}</view>
            <view class="contact-relation">{{ contact.relation }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 没有搜索结果 -->
    <view v-if="searchKeyword && searchResults.length === 0" class="empty-result">
      <image class="empty-image" src="/static/empty-search.png" mode="aspectFit" />
      <text class="empty-text">没有找到相关宗亲</text>
    </view>

    <!-- 联系人列表（按字母顺序） -->
    <view v-if="!searchKeyword" class="section">
      <view v-for="(group, groupIndex) in contactGroups" :key="groupIndex">
        <view class="section-title">{{ group.letter }}</view>
        <view class="contact-list">
          <view
            v-for="(contact, contactIndex) in group.contacts"
            :key="'contact-' + contactIndex"
            class="contact-item"
            @click="startChat(contact)"
          >
            <image
              class="contact-avatar"
              :src="contact.avatar || 'https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png'"
              mode="aspectFill"
            />
            <view class="contact-info">
              <view class="contact-name">{{ contact.name }}</view>
              <view class="contact-relation">{{ contact.relation }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 索引列表 -->
    <view v-if="!searchKeyword" class="index-list">
      <text
        v-for="(letter, index) in indexLetters"
        :key="index"
        class="index-item"
        @click="scrollToLetter(letter)"
      >
        {{ letter }}
      </text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

// 定义联系人类型
interface Contact {
  id: string;
  name: string;
  avatar: string;
  relation: string;
}

// 定义联系人分组类型
interface ContactGroup {
  letter: string;
  contacts: Contact[];
}

// 设置页面标题
uni.setNavigationBarTitle({
  title: "发起聊天",
});

// 搜索关键词
const searchKeyword = ref("");

// 最近联系人
const recentContacts = ref<Contact[]>([
  {
    id: "1",
    name: "李家族长",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    relation: "二代孙",
  },
  {
    id: "2",
    name: "李家三叔",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    relation: "三代孙",
  },
  {
    id: "3",
    name: "李二狗",
    avatar: "https://boyangli.oss-cn-shanghai.aliyuncs.com/20250930/3837e31b236d46578dcc41d49904568e.png",
    relation: "六代孙",
  },
]);

// 所有联系人（按字母分组）
const contactGroups = ref<ContactGroup[]>([
  {
    letter: "A",
    contacts: [{ id: "a1", name: "阿强", avatar: "/static/avatar.png", relation: "五代孙" }],
  },
  {
    letter: "B",
    contacts: [{ id: "b1", name: "宝宝", avatar: "/static/avatar.png", relation: "七代孙女" }],
  },
  {
    letter: "L",
    contacts: [
      { id: "l1", name: "李家大姐", avatar: "/static/avatar.png", relation: "四代孙女" },
      { id: "l2", name: "李家三叔", avatar: "/static/avatar.png", relation: "三代孙" },
      { id: "l3", name: "李家族长", avatar: "/static/avatar.png", relation: "二代孙" },
      { id: "l4", name: "李二狗", avatar: "/static/avatar.png", relation: "六代孙" },
    ],
  },
  {
    letter: "Z",
    contacts: [{ id: "z1", name: "志强", avatar: "/static/avatar.png", relation: "五代孙" }],
  },
]);

// 索引字母列表
const indexLetters = computed(() => {
  return contactGroups.value.map((group) => group.letter);
});

// 搜索结果
const searchResults = ref<Contact[]>([]);

// 处理搜索
function handleSearch() {
  if (!searchKeyword.value) {
    searchResults.value = [];
    return;
  }

  const keyword = searchKeyword.value.toLowerCase();
  const results: Contact[] = [];

  contactGroups.value.forEach((group) => {
    group.contacts.forEach((contact) => {
      if (
        contact.name.toLowerCase().includes(keyword) ||
        contact.relation.toLowerCase().includes(keyword)
      ) {
        results.push(contact);
      }
    });
  });

  searchResults.value = results;
}

// 滚动到指定字母索引
function scrollToLetter(letter: string) {
  // 在实际项目中，这里应该实现滚动到对应索引的功能
  console.log("滚动到字母:", letter);
  uni.showToast({
    title: letter,
    icon: "none",
    position: "center",
  });
}

// 开始聊天
function startChat(contact: Contact) {
  uni.navigateTo({
    url: `/pages/chat/detail?id=${contact.id}&name=${encodeURIComponent(contact.name)}&isGroup=false`,
  });
}
</script>

<style lang="scss">
.new-chat-container {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 50rpx;
  position: relative;
}

.search-box {
  padding: 20rpx;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-input-box {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 30rpx;
}

.search-icon {
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  font-size: 28rpx;
  background-color: transparent;
}

.section {
  margin-bottom: 20rpx;
}

.section-title {
  padding: 10rpx 30rpx;
  background-color: #f8f8f8;
  font-size: 24rpx;
  color: #999;
}

.contact-list {
  background-color: #fff;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.contact-info {
  flex: 1;
}

.contact-name {
  font-size: 28rpx;
  color: #333;
}

.contact-relation {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.index-list {
  position: fixed;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 99;
}

.index-item {
  font-size: 24rpx;
  color: #3b8dff;
  padding: 6rpx;
}
</style>
